<template>
  <div>
    <div>
      <el-button @click="changeUserId">修改userId 测试自定义表格查询参数</el-button>
    </div>
    <!-- 搜索表单部分 -->
    <UiQueryForm v-model="queryForm" :formConfig="queryFormConfig" @callHandleFormItemChange="queryFormItemChangeHook">
      <el-button @click="queryHook">搜索</el-button>
      <el-button @click="resetHook">重置</el-button>
      <el-button @click="createHook">新建</el-button>
      <el-button>导入</el-button>
      <el-button>导出</el-button>
    </UiQueryForm>
    <!-- 页面表格部分 -->
    <div class="-mt-20">
      <BaseCard>
        <UiPageTable :storeAdapter="orderStoreAdapter" :tableConfig="tableConfig" v-model:pageInfo="pageInfo"
          :customQueryTableParams="customParams" @callHandleSelectionChange="tableSelectChange" ref="uiPageTableRef">
          <!-- 自定义插槽 -->
          <template #genderSlot="scope">
            {{ genderMap[scope.row.gender] }}
          </template>
          <template #vocationSlot="scope">
            {{ vocationMap[scope.row.vocation] }}
          </template>
          <template #handleTableSlot="scope">
            <el-button type="primary" link @click="editTable(scope.row)">编辑</el-button>
            <el-button type="primary" link @click="checkHook(scope.row)">预览</el-button>
            <el-button type="danger" link @click="deleteHook(scope.row)">删除</el-button>
          </template>
        </UiPageTable>
      </BaseCard>
    </div>
    <!-- 弹框表单 -->
    <UiModalForm v-model="modalForm" :formConfig="modalFormConfigProxy" :dialogConfig="modalDialogConfig"
      @callHandleFormItemChange="modalFormItemChange" ref="uiModalFormRef">
      <!-- 预览 隐藏插槽 -->
      <div class="modal-form-slot" v-if="modalFormMode != 'checkHook'">
        <el-button @click="confirmHook">确定</el-button>
        <el-button @click="cancelHook">取消</el-button>
      </div>
    </UiModalForm>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { initFormData, findCurrentFormItem } from "@/utils/init";
import { queryFormConfig } from "./config/query.config"
import { useUiQueryFormHook } from "@/components/ui-query-form/src/hooks/use-ui-query-form";
import { modalFormConfig, modalDialogConfig } from "./config/modal.config";
import { useUiModalFormHook } from "@/components/ui-modal-form/src/hooks/use-ui-modal-form";
import { tableConfig } from "./config/table.config";
import { getOrderRow } from "@/api/orderMg/order"
import { useOrderMgOrderStore } from "@/store/orderMg/order"
import { useStoreAdapterHook } from "@/new-hooks/use-store-adapter"
import { useUiPageTableHook } from "@/components/ui-page-table/src/hooks/use-ui-page-table"

// 订单store
const orderStore = useOrderMgOrderStore()

// store 适配器
const orderStoreAdapter = useStoreAdapterHook(orderStore)

// 表格dom
const uiPageTableRef = ref()

// 弹框表单dom
const uiModalFormRef = ref()

// modalFormConfigProxy 响应式
const modalFormConfigProxy = ref(modalFormConfig)

// 查询表单参数
const queryForm = ref(initFormData(queryFormConfig.formItems))

// 分页绑定数据
const pageInfo = ref({
  page: 1,
  size: 10
})

// 映射性别
const genderMap = {
  1: "男",
  2: "女"
}

// 映射职业
const vocationMap = {
  "soldier": "军人",
  "doctor": "医生"
}

// 自定义查询表格参数 比如从地址栏获取id 或者用户id
const customParams = ref({
  userId: 1
})

// 是否显示弹框表单mode
const modalFormMode = ref("")

// 弹框表单参数
const modalForm = ref(initFormData(modalFormConfig.formItems))

// 修改用户Id
const changeUserId = () => {
  customParams.value.userId++
}

// 表格多选事件
const tableSelectChange = (rows) => {
  console.log('表格多选数据---->', rows);
}

// 弹框表单每一选项change事件
const modalFormItemChange = (value, item) => {
  // 处理表单性别 职业 联动字段
  if (item.field == "gender") {
    if (value == 1) {
      modalForm.value.vocation = "soldier"
    }
    if (value == 2) {
      modalForm.value.vocation = "doctor"
    }
  }
}

console.log(`output->`, uiPageTableRef.value)

// 查询表单hook
const { queryHook, resetHook, queryFormItemChangeHook } = useUiQueryFormHook(queryForm, queryFormConfig, uiPageTableRef)

// 弹框表单callback
const hookCallBack = (mode) => {
  modalFormMode.value = mode
  // name 选项
  const nameFormItem = findCurrentFormItem(modalFormConfigProxy.value.formItems, "field", "name")
  // createTime 选项
  const createTimeFormItem = findCurrentFormItem(modalFormConfigProxy.value.formItems, "field", "createTime")
  // 点击新建按钮触发callback
  if (mode == "createHook") {
    nameFormItem.attributes.disabled = false
    createTimeFormItem.show = true
  }
  // 点击编辑按钮触发callback
  if (mode == "editHook") {
    nameFormItem.attributes.disabled = true
    createTimeFormItem.show = false
  }
  // 点击确认按钮
  if (mode == "confirmHook" || mode == "deleteHook") {
    queryHook()
  }
}

// 模拟调用接口防止row缺少表单数据 如果此处不需要调用接口 可直接调用editHook
const editTable = (row) => {
  // getOrderRow({ id: row.id }).then(res => {
  //   // 调用编辑hook
  //   editHook(res.data)
  // })
  // 调用编辑hook
  editHook(row)
}

// 弹框表单hook
const { createHook, editHook, checkHook, confirmHook, cancelHook } = useUiModalFormHook(orderStoreAdapter, modalForm, modalFormConfigProxy, uiModalFormRef, hookCallBack)

// 页面表格hook
const { deleteHook } = useUiPageTableHook(orderStoreAdapter, hookCallBack)

</script>
<style scoped lang="less"></style>